<template>
	<div class="brand-wrapper">
		<!-- 数据列表 -->
		<el-card class="box-card border" shadow="never">
			<i class="iconfont icon-wj-wj-2"></i>
			<span>数据列表</span>
			<el-button style="float: right;margin-top:-5px;" size="small">操作按钮</el-button>
		</el-card>
		 <el-table
		    :data="catList"
		    stripe
			border
		    style="width: 100%">
		    <el-table-column
		      prop="id"
		      label="编号"
			  align="center"
		      width="80">
		    </el-table-column>
		    <el-table-column
		      prop="name"
			  align="center"
		      label="品牌名称"
		      width="80">
		    </el-table-column>
		    <el-table-column
			align="center"
		      prop="firstLetter"
		      label="品牌首字母">
		    </el-table-column>
			<el-table-column
			  prop="sort"
			  align="center"
			  label="排序">
			</el-table-column>
			
			<el-table-column
			  prop="factoryStatus"
			  align="center"
			  label="品牌制造商">
			  <template v-slot="s">
				  <el-switch
				  :active-value="1"
				  :inactive-value="0"
					v-model="s.row.navStatus"
					active-color="#13ce66"
					inactive-color="#ff4949">
				  </el-switch>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="showStatus"
			  align="center"
			  label="是否显示">
			  <template v-slot="s">
				  <el-switch
				  :active-value="1"
				  :inactive-value="0"
					v-model="s.row.showStatus"
					active-color="#13ce66"
					inactive-color="#ff4949">
				  </el-switch>
			  </template>
			</el-table-column>
			
			<el-table-column
			  prop="address"
			  width="230"
			  align="center"
			  label="相关">
			  <template v-slot="s">
				 <span>商品：</span>
				 <el-button type="text">{{s.row.productCount}}</el-button>
				 <span style="margin-left:20px;">评价：</span>
				 <el-button type="text">{{s.row.productCommentCount}}</el-button>
				 
			  </template>
			</el-table-column>
			<el-table-column
			  prop="address"
			  width="230"
			  align="center"
			  label="操作">
			  <template>
					  <el-button size="mini" @click="handleCateEdit">编辑</el-button>
					  <el-button size="mini" type="danger" @click="handleCateDel">删除</el-button>
			  </template>
			</el-table-column>
		  </el-table>
		  
		  <div class="block" style="float:right;margin-top:20px;">
		     <el-pagination
		       @size-change="handleSizeChange"
		       @current-change="handleCurrentChange"
		       :current-page="1"
		       :page-sizes="[3, 5, 8, 10]"
		       :page-size="3"
		       layout="total, sizes, prev, pager, next, jumper"
		       :total="total">
		     </el-pagination>
		   </div>
	</div>
</template>

<script>
		import {getBrandListQuery} from "@/api/brand.js"
	export default{
		data(){
			return{
				catList:[],
				listQuery:{
					pageNum:1,
					pageSize:3
				},
				total:0
			}
		},
		methods:{
			getCatListByQuery(){
				getBrandListQuery(this.listQuery)
				.then(resp=>{
					this.catList=resp.data.data.list;
					this.total = resp.data.data.total;
				})
			},
			handleSizeChange(val){
				this.listQuery.pageSize=val;
				this.getCatListByQuery();
			},
			handleCurrentChange(val){
				this.listQuery.pageNum=val;
				this.getCatListByQuery();
			},
			handleCateDel(){
				alert("删除分类")
			},
			handleCateEdit(){
				alert("编辑分类")
			}
		},
		mounted() {
			this.getCatListByQuery();
		},
		mixins:[
			// productMixin
		]
	}
</script>

<style lang="scss" scoped="scoped">
	.brand-wrapper{
		padding:15px;
	}
</style>